/* pages/work-order/executeRecord/index.wxss */
.executePage {
    height: 100vh;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.executeHeader {
    background: #fff;
}

.statusList {
    display: flex;
    font-size: 28rpx;
    padding: 24rpx;

    .dot {
        width: 24rpx;
        height: 24rpx;
        background: #e5e5e5;
        border: #EDEEF0 1rpx solid;
        border-radius: 50%;
        position: absolute;
        top: 0rpx;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
        z-index: 2;
    }

    .line {
        width: 100%;
        height: 6rpx;
        background: #e5e5e5;
        position: absolute;
        left: -50%;
        top: 9rpx;
        z-index: 1;
    }


    .item {
        width: 25%;
        flex-shrink: 0;
        flex-grow: 0;
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        height: 100rpx;
        position: relative;

        &:first-child {
            .line {
                display: none;
            }
        }

        &.current {
            .dot {
                width: 44rpx;
                height: 44rpx;
                border: none;
                top: -12rpx;
                background: linear-gradient(135deg, #4A90E2, #9B51E0);
                display: flex;
                flex-direction: column;
                justify-content: center;
                animation: rotate 2s infinite linear;

                &::before {
                    width: 24rpx;
                    height: 24rpx;
                    content: '';
                    display: block;
                    margin: 0 auto;
                    background: #fff;
                    border-radius: 50%;
                }
            }

            .line {
                background: linear-gradient(to right, rgba(64, 158, 255, 0), rgba(64, 158, 255, 1));
            }

        }

        &.active {
            .dot {
                background: #058aff;
            }

            .line {
                background: linear-gradient(to right, rgba(64, 158, 255, 0), rgba(64, 158, 255, 1));
            }
        }
    }

}

.executeBody {
    flex-grow: 1;
    min-height: 0;
    position: relative;
}

.panalIcon {
    padding: 20rpx;
    color: #ADB5BD;
    position: relative;

    .iconfont {
        font-size: 40rpx;
    }

    &.active {
        color: #058aff;
    }

    .problemWindow {
        position: absolute;
        right: 24rpx;
        top: calc(100% - 20rpx);
        width: 462rpx;
        border-radius: 24rpx;
        background: #fff;
        z-index: 9;
        font-size: 24rpx;
        color: #343a40;
        padding: 24rpx;
        transform: translateY(20rpx);
        opacity: 0;
        visibility: hidden;
        transition: all .3s;

        &.show {
            transform: none;
            visibility: visible;
            opacity: 1;
        }

        .list {
            display: flex;
            flex-direction: column;
            gap: 24rpx;

            .item {
                display: flex;

                .label {
                    color: #ADB5BD;
                }
            }
        }

        .iconList {
            display: flex;
            gap: 34rpx;
            justify-content: center;
            padding: 24rpx 0;
            color: #058aff;
        }

        .showMore {
            text-align: center;
            color: #058aff;
        }
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.panal {
    display: flex;
    flex-direction: column;
    padding: 24rpx;
    font-size: 24rpx;
    gap: 32rpx;

    .title {
        font-size: 28rpx;
        position: relative;
        text-align: center;
        font-weight: 600;
        height: 44rpx;

        &::before {
            content: '';
            display: block;
            width: 28rpx;
            height: 4rpx;
            background: #058aff;
            border-radius: 2rpx;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .textList {
        display: flex;
        flex-direction: column;
        gap: 16rpx;

        .item {
            display: flex;

            .label {
                color: #adb5bd;
            }
        }
    }

    .iconList {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24rpx;

        .item {
            background: #F5F7FA;
            border-radius: 12rpx;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 10rpx;
            padding: 24rpx;
            box-sizing: border-box;

            .icon {
                padding-top: 10rpx;

                .iconfont {
                    font-size: 48rpx;
                    color: #058aff;
                }
            }

            .info {
                color: #adb5bd;
            }
        }
    }

}

.doListWrap {
    position: relative;
    padding-bottom: 160rpx;

    .topLine {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
}

.startButton {
    position: absolute;
    background: #058aff;
    color: #fff;
    top: 80rpx;
    left: 100rpx;
    font-size: 24rpx;
    border-radius: 32rpx;
    width: 220rpx;
    height: 66rpx;
    line-height: 66rpx;
    text-align: center;

    .text {
        padding-left: 10rpx;
    }

    .dotCircle {
        position: absolute;
        left: -60rpx;
        top: 50%;
        transform: translateY(-50%);
    }

    &.step {
        position: fixed;
        left: auto;
        top: auto;
        right: 80rpx;
        bottom: 80rpx;
    }
}

.dotCircle {
    width: 36rpx;
    height: 36rpx;
    background: #fff;
    border: #adb5bd 2rpx solid;
    border-radius: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &::before {
        content: '';
        display: block;
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background: #0F7EDF;
        margin: 0 auto;
    }
}

.doListWrap {
    font-size: 28rpx;
}

.excutor {
    color: #adb5bd;
    padding: 24rpx 48rpx;
    pointer-events: none;
}

.businessCard {
    background: #fff;
    gap: 24rpx;
    padding: 24rpx;

    .cardHeader {
        display: flex;
        gap: 24rpx;

        .avatar {
            .avatarImg {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }
        }

        .infoBox {
            display: flex;
            font-size: 28rpx;
            font-weight: 600;
            gap: 24rpx;

            .score {
                display: flex;

                .iconfont {
                    font-size: 20rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-right: 10rpx;
                    color: #fa6b45;
                }
            }
        }

        .company {
            color: #adb5bd;
            font-size: 24rpx;
            font-weight: 600;
        }
    }

    .cardBody {

        .certList {
            display: flex;
            justify-content: space-between;
            gap: 24rpx;

            .certItem {
                flex-grow: 1;
                display: flex;
                justify-content: space-between;
                background: #e9f3fd;
                padding: 16rpx;
                font-size: 24rpx;
                border-radius: 12rpx;

                .subText {
                    color: #adb5bd;
                    font-size: 20rpx;
                }

                .right {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .iconfont {
                        font-size: 48rpx;
                        color: #377af6;
                        color: transparent;
                        /* 文字颜色设为透明 */
                        background-image: linear-gradient(to left top, #3c7df5, #b9d3f7);
                        /* 右下到左上渐变 */
                        background-clip: text;
                        /* 背景裁剪到文字区域 */
                        -webkit-background-clip: text;
                        /* 兼容性处理 */
                    }
                }
            }
        }
    }
}

.doList {
    display: flex;
    flex-direction: column-reverse;
    padding: 0 0 0 60rpx;

    .title {
        padding: 20rpx 60rpx;
        position: relative;

        .dot {
            position: absolute;
            width: 40rpx;
            height: 40rpx;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            left: -18rpx;
            font-size: 38rpx;
            top: 20rpx;
            color: #adb5bd;
        }
    }

    .item {
        .main {
            display: flex;
            flex-direction: column;
            gap: 24rpx;
            border-left: #b7b9bd 2rpx solid;
            padding-top: 12rpx;
            padding-right: 48rpx;

            .location {
                padding: 0 0 0 48rpx;
                font-size: 24rpx;

                .iconfont {
                    padding-left: 12rpx;
                    color: #058aff;
                    font-size: 28rpx;
                }
            }

            .dateTime {
                padding: 0 48rpx;
                display: flex;
                gap: 24rpx;

                .link {
                    color: #058aff;
                }
            }
        }
    }
}

.windowForm {
    display: flex;
    flex-direction: column;
    gap: 24rpx;

    .formItem {
        display: flex;
        gap: 24rpx;

        .label {
            width: 5em;
            text-align: right;
            height: 60rpx;
            line-height: 60rpx;
            flex-shrink: 0;

            .red {
                color: #d92400;
                display: inline-block;
                padding-left: 6rpx;
            }
        }

        .inputBox {
            background: #f7f7f9;
            height: 60rpx;
            line-height: 60rpx;
            border-radius: 12rpx;
            flex-grow: 1;
            padding: 0 12rpx;
            display: flex;

            &.white {
                background: transparent;
                padding: 0;
                display: flex;
                gap: 12rpx;

                .subInput {
                    background: #f7f7f9;
                    text-align: center;
                    width: 30%;
                    border-radius: 12rpx;
                    display: flex;

                    .name {
                        flex-grow: 1;
                    }

                    .text {
                        width: 38rpx;
                        text-align: center;
                    }
                }
            }

            .subInput {
                height: 60rpx;
                flex-grow: 1;

                &.center {
                    text-align: center;

                    .gray {
                        color: #ADB5BD;
                    }
                }
            }

            .iconfont {
                width: 60rpx;
                text-align: center;
                font-size: 34rpx;
                color: #058aff;
            }
        }
    }

    .more {
        display: flex;
        flex-direction: column;
        gap: 24rpx;
    }

    .viewMore {
        text-align: center;
        color: #adb5bd;
        padding: 24rpx 0;
    }
}

.panalBody {
    .message {
        padding: 24rpx;
        font-size: 32rpx;
    }
}

.panalFooter {
    display: flex;
    justify-content: flex-end;

    .buttonGroup {
        display: flex;
        gap: 24rpx;

        .button {
            font-size: 28rpx;
            font-weight: 500;
            color: #ADB5BD;

            &.primary {
                color: #058aff;
            }
        }
    }

    .fullButtonGroup {
        flex-grow: 1;
        display: flex;
        justify-content: space-between;

        .button {
            width: calc(50% - 12rpx);
            border: #b9d3f7 2rpx solid;
            color: #ADB5BD;
            text-align: center;
            border-radius: 12rpx;
            height: 54rpx;
            line-height: 54rpx;

            &.primary {
                color: #058aff;
                border-color: #058aff;
            }
        }
    }
}